<template>
  <el-popover
    v-if="scope?.row?.[prop]"
    placement="left"
    :title="title"
    trigger="hover"
    width="200px"
  >
    <template #reference>
      <div class="tableCell">
        <div
          :class="['tag', 'tag_public', getClassFn(item)]"
          v-for="(item, index) in tagConfig"
          :key="index"
          :style="getStyleFn(item)"
        >
          {{ item }}
        </div>
      </div>
    </template>
    <div
      :class="['tag_list', 'tag_public', getClassFn(item)]"
      v-for="(item, index) in tagListConfig"
      :key="index"
      :style="getStyleFn(item)"
    >
      {{ item }}
    </div>
  </el-popover>
</template>
<script setup>
import { isArray, isString } from 'lodash';
import { computed } from 'vue';

const props = defineProps({
  scope: { type: Object },
  row: { type: Object },
  prop: { type: String },
  title: { type: String },
  maxLength: {
    type: Number,
    default: 2,
  },
  options: {
    // 根据返回字段，设置背景色
    type: Object,
    default: () => ({}),
  },
});
const emit = defineEmits([]);

const tagConfig = computed(() => {
  let list = props?.row[props.prop];
  if (!list) {
    return;
  }
  if (isString(list)) {
    list = list.split(',');
  }
  let arr = [];
  if (list.length > props.maxLength) {
    arr = list.slice(0, props.maxLength);
    arr.push(`+${list.length - props.maxLength}`);
  } else {
    arr = list;
  }
  return arr;
});

const tagListConfig = computed(() => {
  let list = props?.row[props.prop];
  if (!list) {
    return [];
  }
  if (isString(list)) {
    list = list.split(',');
  }
  return list;
});

// 获取样式
function getStyleFn(val) {
  let obj = props.options;
  return obj[val]?.style || '';
}

// 获取class
function getClassFn(val) {
  if (val.indexOf('+') === 0) return 'tag_public_num';
  let obj = props.options;
  let type = obj[val]?.type || '';
  return type ? 'tag_public_' + type : '';
}
</script>
<style lang="scss" scoped>
.tableCell {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.tag_public {
  height: 20px;
  border-radius: 4px;

  margin: 0 2px;
  padding: 0 8px;

  line-height: 20px;
  font-size: 12px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;

  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

.tag {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  max-width: 100px;
  // min-width: 40px;

  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; // 默认不换行；
}

.tag_list {
  width: fit-content;
  margin: 5px;
}

.tag_public_primary {
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
}

.tag_public_danger {
  color: var(--el-color-danger);
  background-color: var(--el-color-danger-light-9);
}

.tag_public_warning {
  color: var(--el-color-warning);
  background-color: var(--el-color-warning-light-9);
}

.tag_public_success {
  color: var(--el-color-success);
  background-color: var(--el-color-success-light-9);
}

.tag_public_info {
  color: var(--el-color-info);
  background-color: var(--el-color-info-light-9);
}
.tag_public_num {
  overflow: visible;
}
</style>
